'use client';

import { useState } from 'react';
import { useTheme } from 'next-themes';

export default function SettingsForm() {
    const { theme, setTheme } = useTheme();
    const [notifications, setNotifications] = useState(false);
    const [tempUnit, setTempUnit] = useState('celsius');

    return (
        <div className="bg-white/80 backdrop-blur-md rounded-2xl p-6 shadow-lg">
            <div className="space-y-6">
                <div>
                    <label className="text-gray-700 font-medium">主题</label>
                    <select
                        value={theme}
                        onChange={(e) => setTheme(e.target.value)}
                        className="mt-2 block w-full rounded-md border border-gray-300 p-2"
                    >
                        <option value="light">浅色</option>
                        <option value="dark">深色</option>
                        <option value="system">跟随系统</option>
                    </select>
                </div>

                <div>
                    <label className="text-gray-700 font-medium">温度单位</label>
                    <div className="mt-2 space-x-4">
                        <label className="inline-flex items-center">
                            <input
                                type="radio"
                                value="celsius"
                                checked={tempUnit === 'celsius'}
                                onChange={(e) => setTempUnit(e.target.value)}
                                className="form-radio"
                            />
                            <span className="ml-2">摄氏度 (°C)</span>
                        </label>
                        <label className="inline-flex items-center">
                            <input
                                type="radio"
                                value="fahrenheit"
                                checked={tempUnit === 'fahrenheit'}
                                onChange={(e) => setTempUnit(e.target.value)}
                                className="form-radio"
                            />
                            <span className="ml-2">华氏度 (°F)</span>
                        </label>
                    </div>
                </div>

                <div>
                    <label className="flex items-center">
                        <input
                            type="checkbox"
                            checked={notifications}
                            onChange={(e) => setNotifications(e.target.checked)}
                            className="form-checkbox"
                        />
                        <span className="ml-2">启用天气通知</span>
                    </label>
                </div>
            </div>
        </div>
    );
}